<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>12.bootstrap的浮动媒体与辅助类</title>
        <!-- bootstrap的动态功能都是依靠jquery的， 所以要引入jquery，而且要在它的前面-->
        <!-- jquery库, bootstrap依赖于jquery -->
        <script src="static/js/jquery-3.4.1.js"></script>
        <!-- bootstrap的样式 -->
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <!-- bootstrap的js -->
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!-- 文字辅助类 -->
                    <h3><span class="text-info">Hello world!</span> <span class="caret"></span></h3>
                </div>
                <div class="col-sm-10 col-sm-offset-1">
                    <!-- 快速浮动. pull-right， pull-left -->
                    <h3><span class="text-info pull-right">Hello world! <span class="caret"></span> </span></h3>
                </div>
                <!-- 清除浮动对后续的影响 -->
                <div class="clearfix"></div>
                <a href="baidu.com" target="_top">百度，百毒不侵！</a>

                <!-- 媒体对象 -->
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object" src="static/img/r1.jpg" style="width: 120px; height: 120px;"
                                 alt="日本">
                        </a>
                    </div>
                    <div class="media-body">
                        <h3 class="media-heading text-success">送日本国僧敬龙归</h3>
                        <span class="text-primary" style="font-size: medium">扶桑已在渺茫中</span>，<br/>
                        <span class="text-primary" style="font-size: medium">家在扶桑东更东</span>。<br/>
                        <span class="text-primary" style="font-size: medium">此去与师谁共到</span>，<br/>
                        <span class="text-primary" style="font-size: medium">一船明月一帆风</span>。<br/>
                    </div>
                </div>

                <br/>
                <br/>
                <br/>
                <!-- 媒体列表 -->
                <div class="row">
                    <div class="col-sm-8 col-sm-offset-2">
                        <ul class="media-list">
                            <li class="media">
                                <div class="media-right">
                                    <a href="#">
                                        <img class="media-object" src="static/img/i2.jpg" style="width: 100px;
                                        height: 100px;" alt="图片资源">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">海贼王</h4>
                                    Hello 海贼王<br/>
                                    Hello 海贼王<br/>
                                    Hello 海贼王<br/>
                                </div>
                            </li>
                            <li class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="static/img/i3.jpg" style="width: 100px;
                                        height: 100px;" alt="图片资源">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">可爱小熊</h4>
                                    可爱小熊可爱小熊<br/>
                                    可爱小熊可爱小熊<br/>
                                    可爱小熊可爱小熊<br/>
                                </div>
                            </li>
                            <li class="media">
                                <div class="media-left">
                                    <a href="#">
                                        <img class="media-object" src="static/img/i4.jpg" style="width: 100px;
                                        height: 100px;" alt="图片资源">
                                    </a>
                                </div>
                                <div class="media-body">
                                    <h4 class="media-heading">可爱小姑娘</h4>
                                    可爱小姑娘<br/>
                                    可爱小姑娘<br/>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 列表组 -->
                <div class="row" style="margin-top: 10px">
                    <div class="col-sm-8 col-sm-offset-2">
                        <span class="lead">中国古典八大名著</span><br/>
                        <ul class="list-group">
                            <!-- 情景类 -->
                            <li class="list-group-item list-group-item-success"><a href="#">红楼梦</a></li>
                            <li class="list-group-item list-group-item-danger"><a href="#">三国演义</a></li>
                            <li class="list-group-item list-group-item-info"><a href="#">西游记</a></li>
                            <li class="list-group-item list-group-item-warning"><a href="#">水浒传</a></li>
                            <li class="list-group-item"><a href="#">聊斋志异</a></li>
                            <li class="list-group-item"><a href="#">儒林外史</a></li>
                            <li class="list-group-item"><a href="#">封神演义</a></li>
                            <li class="list-group-item"><a href="#">东周列国志</a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </body>
</html>

